<template>
  <view class="daily-recruitment">
    <view class="post-form">
      <!-- 基本信息 -->
      <view class="form-group">
        <text class="label">职位标题</text>
        <input
            type="text"
            v-model="formData.positionName"
            class="input"
            placeholder="请输入职位标题"
        />
        <text v-if="formErrors.positionName" class="error-text">{{ formErrors.positionName }}</text>
      </view>

      <view class="form-group">
        <text class="label">职位类型</text>
        <view
            class="picker-input"
            :class="{ 'error-border': formErrors.type }"
            @click="showTypePicker = true"
        >
          <text class="picker-text">{{ jobTypeText || '请选择职位类型' }}</text>
        </view>
        <text v-if="formErrors.type" class="error-text">{{ formErrors.type }}</text>
      </view>

      <view class="form-group">
        <text class="label">公司名称</text>
        <input
            type="text"
            v-model="formData.corporateName"
            class="input"
            placeholder="请输入公司名称"
        />
        <text v-if="formErrors.corporateName" class="error-text">{{ formErrors.corporateName }}</text>
      </view>

      <view class="form-group">
        <text class="label">工作地点</text>
        <input
            type="text"
            v-model="formData.location"
            class="input"
            placeholder="请输入工作地点"
        />
        <text v-if="formErrors.location" class="error-text">{{ formErrors.location }}</text>
      </view>

      <!-- 职位要求 -->
      <view class="form-group">
        <text class="label">经验要求</text>
        <view
            class="picker-input"
            :class="{ 'error-border': formErrors.experience }"
            @click="showExperiencePicker = true"
        >
          <text class="picker-text">{{ formData.experience || '请选择经验要求' }}</text>
        </view>
        <text v-if="formErrors.experience" class="error-text">{{ formErrors.experience }}</text>
      </view>

      <view class="form-group">
        <text class="label">薪资</text>
        <input
            type="text"
            v-model="formData.salary"
            class="input"
            placeholder="请输入薪资（如：200元/天）"
        />
        <text v-if="formErrors.salary" class="error-text">{{ formErrors.salary }}</text>
      </view>

      <view class="form-group">
        <text class="label">工作时间</text>
        <input
            type="text"
            v-model="formData.timeFrame"
            class="input"
            placeholder="请输入工作时间（如：8:00-18:00）"
        />
        <text v-if="formErrors.timeFrame" class="error-text">{{ formErrors.timeFrame }}</text>
      </view>

      <view class="form-group">
        <text class="label">招聘人数</text>
        <input
            type="text"
            v-model="formData.number"
            class="input"
            placeholder="请输入招聘人数"
        />
        <text v-if="formErrors.number" class="error-text">{{ formErrors.number }}</text>
      </view>

      <!-- 职位描述 -->
      <view class="form-group">
        <text class="label">详细描述</text>
        <nut-textarea
            v-model="formData.description"
            class="textarea"
            placeholder="请详细描述工作内容、要求、福利等"
        />
        <text v-if="formErrors.description" class="error-text">{{ formErrors.description }}</text>
      </view>

      <!-- 截止日期 -->
      <view class="form-group">
        <text class="label">招聘截止</text>
        <view
            class="picker-input"
            :class="{ 'error-border': formErrors.deadline }"
            @click="showDeadlinePicker = true"
        >
          <text class="picker-text">{{ formData.deadline || '请选择截止日期' }}</text>
        </view>
        <text v-if="formErrors.deadline" class="error-text">{{ formErrors.deadline }}</text>
      </view>

      <!-- 提交按钮 -->
      <nut-button class="submit-btn" @click="handleSubmit">发布招聘</nut-button>
    </view>

    <!-- 选择器弹窗 -->
    <nut-popup v-model:visible="showTypePicker" position="bottom" round>
      <nut-picker
          v-model="jobTypesValue"
          :columns="jobTypes"
          title="选择职位类型"
          @confirm="onTypeConfirm"
          @cancel="showTypePicker = false"
      />
    </nut-popup>

    <nut-popup v-model:visible="showExperiencePicker" position="bottom" round>
      <nut-picker
          :columns="experienceOptions.map(exp => ({ text: exp, value: exp }))"
          title="选择经验要求"
          @confirm="onExperienceConfirm"
          @cancel="showExperiencePicker = false"
      />
    </nut-popup>

    <nut-popup v-model:visible="showDeadlinePicker" position="bottom" round>
      <nut-date-picker
          title="选择截止日期"
          @confirm="onDeadlineConfirm"
          @cancel="showDeadlinePicker = false"
      />
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import Taro from '@tarojs/taro'
import {post} from "@/utils/request";
import {Textarea as nutTextarea} from '@nutui/nutui-taro';
import {Popup as nutPopup} from '@nutui/nutui-taro';
import {Picker as nutPicker} from '@nutui/nutui-taro';
import {DatePicker as nutDatePicker} from '@nutui/nutui-taro';
import {Button as nutButton} from '@nutui/nutui-taro';

/** 表单数据类型 */
interface JobFormData {
  positionName: string
  type: string
  corporateName: string
  location: string
  experience: string
  salary: string
  timeFrame: string
  description: string
  number: string
  deadline: string
}
/**定义获取职位类型接口*/
interface JobTypeColumn {
  update_time: number,
  create_time: number,
  name: string,
  id: number,
  pic: string
}

interface JobTypeItem {
  columns: JobTypeColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}

const jobTypeText = ref()
const jobTypesValue = ref()
/** 职位类型选项 */
const jobTypes = ref([
  {
    text:'',
    value:''
  }
  //'普工', '技工', '管理', '质检', '仓储', '后勤', '其他'
])

/** 经验要求选项 */
const experienceOptions = [
  '不限', '1年以下', '1-3年', '3-5年', '5年以上'
]
/**获取职位类型*/
getType()
function getType() {
  post('/dictionary/recruitmentDailyLabel').then(res => {
    jobTypes.value = res.data.map((item: JobTypeItem) => ({
      text: item.columns.name,
      value: item.columns.id.toString()
    }));
  })
}

/** 表单数据 */
const formData = reactive<JobFormData>({
  positionName: '',
  type: '',
  corporateName: '',
  location: '',
  experience: '',
  salary: '',
  timeFrame: '',
  description: '',
  number: '',
  deadline: ''
})

/** 表单验证状态 */
const formErrors = reactive<Partial<JobFormData>>({})

/** 选择器显示状态 */
const showTypePicker = ref(false)
const showExperiencePicker = ref(false)
const showDeadlinePicker = ref(false)

/** 表单验证 */
function validateForm(): boolean {
  const errors: Partial<JobFormData> = {}

  if (!formData.positionName.trim()) errors.positionName = '请输入职位标题'
  if (!formData.type) errors.type = '请选择职位类型'
  if (!formData.corporateName.trim()) errors.corporateName = '请输入公司名称'
  if (!formData.location.trim()) errors.location = '请输入工作地点'
  if (!formData.experience) errors.experience = '请选择经验要求'
  if (!formData.salary.trim()) errors.salary = '请输入薪资'
  if (!formData.timeFrame.trim()) errors.timeFrame = '请输入工作时间'
  if (!formData.description.trim()) errors.description = '请输入职位描述'
  if (!formData.number.trim()) errors.number = '请输入招聘人数'
  if (!formData.deadline) errors.deadline = '请选择截止日期'

  Object.assign(formErrors, errors)
  return Object.keys(errors).length === 0
}

/** 提交表单 */
function handleSubmit() {
  console.log("formData", formData);
  if (!validateForm()) {
    Taro.showToast({title: '请完善必填信息', icon: 'none', duration: 2000})
    return
  }

  Taro.showLoading({title: '发布中...'})

  setTimeout(() => {
    Taro.hideLoading()
    const jobFormData: JobFormData = {...formData}
    //console.log("参数列表",jobFormData)
    post('/recruitmentDaily/save', jobFormData)
        .then(res => {
          if (res.code === 0) {
            Taro.showToast({title: '发布成功！', icon: 'success', duration: 2000})
          } else {
            Taro.showToast({title: '发布失败！', icon: 'error', duration: 2000})
          }
        })
  }, 1500)
}

/** 选择器确认事件 */
function onTypeConfirm(value: any) {
  if (value.selectedValue && value.selectedValue.length > 0){
    jobTypesValue.value = value.selectedValue[0]
    //jobTypes.value = categoryOptions.value.find(item => item.value === String(val.selectedValue[0]))?.text
    jobTypeText.value = jobTypes.value.find(item => item.value === String(value.selectedValue[0]))?.text
  }
  formData.type = String(value?.selectedValue[0] || '')
  showTypePicker.value = false
}

function onExperienceConfirm(value: any) {
  formData.experience = value?.selectedValue[0] || ''
  showExperiencePicker.value = false
}

function onDeadlineConfirm(value: any) {
  const [year, month, day] = value.selectedValue || []
  formData.deadline = year && month && day ? `${year}-${month}-${day}` : ''
  showDeadlinePicker.value = false
}
</script>

<style>
/* 基础容器样式 */
.daily-recruitment {
  background-color: #f5f5f5;
}

/* 表单容器样式 */
.post-form {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 表单组样式 */
.form-group {
  margin-bottom: 30rpx;
}

/* 标签样式 */
.label {
  display: block;
  margin-bottom: 8rpx;
  font-weight: bold;
  color: #555;
  font-size: 28rpx;
}

/* 输入框样式 */
.input, .textarea, .picker-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: white;
}

/* 选择器输入框样式 */
.picker-input {
  display: flex;
  align-items: center;
  min-height: 76rpx;
  cursor: pointer;
}

.picker-text {
  color: #333;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-input placeholder {
  color: #999;
}

/* 文本域样式 */
.textarea {
  min-height: 180rpx;
  resize: vertical;
}

/* 错误提示样式 */
.error-text {
  color: #f44336;
  font-size: 24rpx;
  margin-top: 8rpx;
  display: block;
}

.error-border {
  border-color: #f44336 !important;
}

/* 提交按钮样式 */
.submit-btn {
  background-color: #1976d2 !important;
  color: white !important;
  width: 100%;
  margin-top: 40rpx;
  padding: 24rpx 40rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}

/* 输入框聚焦样式 */
input:focus, textarea:focus, .picker-input:focus {
  outline: none;
  border-color: #1976d2;
}
</style>